<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>陈记酒楼</title>
    <link rel="icon" href="./../images/favico.ico">
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
    <!-- 引入样式  -->
    <link rel="stylesheet" href="../styles/index.css" />
    <!--引入vant样式-->
    <link rel="stylesheet" href="../styles/vant.min.css" />
    <!--本页面内容的样式-->
    <link rel="stylesheet" href="./../styles/personal.css" />
</head>

<body>
    <div id="personal" class="app">
        <div class="divHead">
            <div class="divTitle">
                <i class="el-icon-arrow-left" @click="goBack"></i>个人中心
            </div>
        </div>
        <div class="divContent">
            <div class="divItemImage">
                <span>头像：</span>
                <el-upload class="avatar-uploader"
                action="/common/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeUpload"
                ref="upload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar"></img>
            <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
            <img v-else="imageUrl==null" src="./../images/headPage.png" class="avatar"></img>
        </el-upload>
            </div>
            <div class="divItem">
                <span>昵称：</span>
                <el-input placeholder=" 请输入昵称" v-model="form.name" maxlength='10' class="inputUser" /></el-input>
            </div>
            <div class="divItem">
                <span class="spanChecked" @click="form.sex = '1'">
                    <i :class="{iActive:form.sex === '1'}"></i>
                    先生
                </span>
                <span class="spanChecked" @click="form.sex = '0'">
                    <i :class="{iActive:form.sex === '0'}"></i>
                    女士
                </span>
            </div>
            <div class="divItem">
                <span>身份证号：</span>
                <el-input placeholder=" 请输入身份证号码" v-model="form.idNumber" maxlength='20'
                    style="width: calc(100% - 80rem);" /></el-input>
            </div>
            <div class="divItem">
                <span>个人简介：</span>
                <el-input placeholder=" 请输入个人简介" v-model="form.introduction" maxlength='140' /></el-input>
            </div>
            <div class="divItem ">
                <span class="demonstration">生日</span>
                <el-date-picker
                v-model="form.birthday"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </div>

        </div>
        <div class="divSave" @click="saveAddress">保存</div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../backend/plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../backend/plugins/element-ui/index.js"></script>
    <!-- 引入vant组件 -->
    <script src="./../js/vant.min.js"></script>
    <!--不同屏幕尺寸根字体设置-->
    <script src="./../js/base.js"></script>
    <!-- 引入axios -->
    <script src="../../backend/plugins/axios/axios.min.js"></script>
    <script src="./../js/request.js"></script>
    <script src="./../api/order.js"></script>
    <script src="./../api/login.js"></script>
    <script>
        new Vue({
            el: "#personal",
            data() {
                return {
                    form: {
                        id:'',
                        userPhone:'',
                        name: '',//昵称
                        idNumber: '',//身份证号码
                        sex: '1',//0表示女 1 表示男
                        introduction: '',//个人简介
                        birthday: '',//生日
                        avatar:''//头像
                    },
                    imageUrl:'',
                    value1: '',
                }
            },
            computed: {},
            created() {
                this.form.userPhone=sessionStorage.getItem("userPhone")
                this.initData()
            },
            mounted() { },
            methods: {
                initData() {
                    this.getPersonal()
                },
                goBack() {
                    history.go(-1)
                },
                async getPersonal() {
                    const res = await getPersonalApi(this.form.userPhone)
                    if (res.code === 1) {
                        console.log("res>>>>",JSON.stringify(res))
                    this.form.name = res.data.name
                    this.form.idNumber= res.data.idNumber
                    this.form.sex= res.data.sex
                    this.form.introduction= res.data.introduction
                    this.form.birthday= res.data.birthday
                    this.form.avatar= res.data.avatar
                    this.form.id= res.data.id
                    this.imageUrl = res.data.avatar
                    } else {
                        this.$notify({ type: 'warning',message: res.msg });
                    }
                },
                async postPersonal() {
                    const res = await addPersonalApi(this.form)
                    if (res.code === 1) {
                        console.log("res>>>>",JSON.stringify(res))
                        this.$notify({ type: 'success',message: res.data });
                    } else {
                        this.$notify({ type: 'warning',message: res.msg });
                    }
                },
                

                // 上传头像
                handleAvatarSuccess(response,file,fileList) {
                    this.imageUrl = response.data
                    this.form.avatar = response.data
                },
                beforeUpload(file) {
                    if (file) {
                        const suffix = file.name.split('.')[1]
                        const size = file.size / 1024 / 1024 < 2
                        if (['png','jpeg','jpg'].indexOf(suffix) < 0) {
                            this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                            this.$refs.upload.clearFiles()
                            return false
                        }
                        if (!size) {
                            this.$message.error('上传文件大小不能超过 2MB!')
                            return false
                        }
                        return file
                    }
                },
                saveAddress(){
                    console.log("form>>>>",this.form)
                    this.postPersonal();
                },
            }
        })
    </script>
</body>

</html>